<template>
	<div class="kp-getcoupon" :class="isnull?'active':''">
		<div class="getcoupon_tab">
			<div class="getcoupon_swip">
				<swiper :options="swiperOptionbanner">
					<swiper-slide v-if='false'>
						<div class="getcoupon_every" :class="tabIndex=='00'?'active':''" @click="tab('00')">专属票</div>
					</swiper-slide>
					<swiper-slide>
						<div class="getcoupon_every" :class="tabIndex=='3'?'active':''" @click="tab('3')">火车票</div>
					</swiper-slide>
					<swiper-slide>
						<div class="getcoupon_every" :class="tabIndex=='2'?'active':''" @click="tab('2')">景区票</div>
					</swiper-slide>
					<swiper-slide>
						<div class="getcoupon_every" :class="tabIndex=='4'?'active':''" @click="tab('4')">汽车票</div>
					</swiper-slide>
					<swiper-slide>
						<div class="getcoupon_every" :class="tabIndex=='6'?'active':''" @click="tab('6')">电影票</div>
					</swiper-slide>
					<swiper-slide>
						<div class="getcoupon_every" :class="tabIndex=='1'?'active':''" @click="tab('1')">酒店票</div>
					</swiper-slide>
					<swiper-slide>
						<div class="getcoupon_every" :class="tabIndex=='5'?'active':''" @click="tab('5')">飞机票</div>
					</swiper-slide>
					<!--<swiper-slide>
						<div class="getcoupon_every" :class="tabIndex=='0'?'active':''" @click="tab('0')">全品票</div>
					</swiper-slide>-->
				</swiper>
				<img src="../../../assets/jianbiantiao@2x.png" class="tab_img" />
			</div>
		</div>

		<div class="getcouponlist" v-if="!isnull">
			<div class="getcoupon_item" v-for="(item,index) in list" :key="index">
				<div class="getcoupon_div">
					<div class="couponitem_left">
						<div class="couponPrice">
							<p class="priceMoney">￥<em>{{item.couponMoney}}</em></p>
							<p class="priceMan">{{item.couponLimitText}}</p>
						</div>
						<div class="couponDtile">
							<div class="couponTitle">
								<p class="coupontext">{{item.couponName}}</p>
								<p class="coupontime" v-if="item.useDay==0" :class="!item.coupon_instructions?'mp15':''">{{item.Startdate}}-{{item.Enddate}}</p>
								<p class="coupontime" v-else :class="!item.coupon_instructions?'mp15':''">领取之日起{{item.useDay}}天内有效</p>
								<p class="couponJz" :class="!item.coupon_instructions?'mp15':''">领取截止日期到{{item.Enddate}}</p>
								<p class="couponrule" @click="rules(index)" v-if="item.coupon_instructions">使用规则<img src="../../../assets/shang@2x.png" v-if="item.isRule"/><img src="../../../assets/xia@2x.png" v-else/></p>
							</div>
						</div>
					</div>
					<div class="couponitem_right" :class="item.isRule?'couponitem_rz':'couponitem_rc'" v-if="item.sign=='2'" @click="useCoupon(item.couponType)">
						<img src="../../../assets/ylq@2x.png" class="assetsimg_ylq" />
						<div class="assets_btn assets_ylq">去使用</div>
					</div>
					<div class="couponitem_right" :class="item.isRule?'couponitem_rz':'couponitem_rc'" v-else-if="item.sign=='1'" @click="getcoupon(item.couponID, index,item.giveType)">
						<div class="pie_circle">
							<div class="circle" v-if="item.couponTotal==0">
								<p class="circleTextN">不限</p>
							</div>
							<div class="circle" v-else>
								<p class="circleText">已抢</p>
								<p class="circlePer"><em>{{item.pers}}</em>%</p>
							</div>
							<div class="left_circle">
								<div class="left-deg" :style="{transform: 'rotate(-'+item.perLeft+'deg)',width:item.perLwidth+'px',}"></div>
							</div>
							<div class="right_circle">
								<div class="right-deg" :style="{transform: 'rotate(-'+item.perRight+'deg)'}"></div>
							</div>
						</div>
						<div class="assets_btn assets_ylq assets_ylq_liji">立即领取</div>
					</div>
					<div class="couponitem_right" :class="item.isRule?'couponitem_rhz':'couponitem_rh'" v-else>
						<img src="../../../assets/yqg@2x.png" class="assetsimg_ylq" />
						<div class="assets_btn assets_yqg">立即领取</div>
					</div>
				</div>
				<div class="getcoupon_con" v-show="item.isRule">
					<div class="getcoupon_text">
						<ol v-show="false">
							<li>此优惠券适用于快票APP2.3.0及以上版本，可用于抵扣快票电影票；</li>
							<li>优惠券仅限在快票移动端适用于快票APP2.3.0及以上版本，可用于抵扣快票电影票；</li>
							<li>订单金额大于50元方可使用；</li>
							<li>有效期内每张优惠券仅限使用一次，不能与其他优惠券同享；</li>
							<li>同一类优惠券仅限使用一次；</li>
							<li>优惠券自领用起30天内有效。</li>
						</ol>
						<div class="getcouponText" v-if="item.coupon_instructions">
							{{item.coupon_instructions}}
						</div>
						<div class="getcouponText" v-else>
							暂无规则
						</div>
						<!--<div class="coupon_daima">
							<p>优惠券代码</p>
							<p>LSLSAZLJALZN</p>
						</div>-->
					</div>
				</div>
			</div>
		</div>
		<div v-show="isnull" class="nulldiv">
			<div class='resultNull'>
				<img src='../../../assets/train/noresult.png'></img>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from "vuex";
	import { swiper, swiperSlide } from 'vue-awesome-swiper';

	export default {
		data() {
			return {
				list: [], //优惠券列表
				isnull: true,
				swiperOptionbanner: {   
					slidesPerView: 5.4,
					//					paginationClickable: true,
					//spaceBetween: 20,
					freeMode: true,
				},
				tabIndex: '3'
			}
		},
		mounted() {
			//			this.changeProcess(25)
			this.getlist()
		},
		created() { //创建后

		},
		watch: { //监听放置

		},
		filters: {

		},
		methods: { //方法放置
			rules(index) {
				let that = this;
				let isRule = that.list[index].isRule; // 先用一个变量接收一个原来的状态值
				that.list.forEach((item) => { //循环已经把所有的状态值清空了
					item.isRule = false;

				})
				that.list[index].isRule = !isRule;
			},
			tab(index) {
				this.list = [];
				this.tabIndex = index;
				this.getlist();
			},
			changeProcess(value) {
				var num = value * 3.6;
				var right = this.$refs.right;
				var left = this.$refs.left;
				if(num < 180) {
					right.style.transform = "rotate(" + num + "deg)";
				} else {
					right.style.transform = "rotate(180deg)";
					right.style.transform = "rotate(" + (num - 180) + "deg)";
				}
			},
			getlist() {
				this.$loading.show();
				let param = {
					"userID": this.userinfo.userID,
					"type": this.tabIndex
				};
				let that = this;
				this.$http.post(this.$baseUrl.baseurl + "coupon/app/coupon/appCouponList", param).then((res) => {
					//					console.log(res);
					if(res.data.Code == 0) {
						if(res.data.Result.myCouponList) {
							if(res.data.Result.myCouponList.length > 0) {
								that.isnull = false;
								var list = res.data.Result.myCouponList;
								var nowTime = new Date().getTime();
								list && list.forEach((val) => {
									(val.couponLimit == 0) ? (val.couponLimitText = '不限') : (val.couponLimitText = '满' + val.couponLimit + '元可用');
									val.Startdate = that.dateuse(val.receiveStartdate);
									val.Enddate = that.dateuse(val.receiveEnddate);
									val.per = val.couponNum / val.couponTotal * 100;
									val.pers = Number(val.per).toFixed(1)
									if(val.per > 50) {
										val.perRight = 0;
										val.perLeft = 180 - (Number(val.per) - 50) * 3.6;
									} else {
										val.perRight = 180 - Number(val.per) * 3.6;
										val.perLeft = 180;
										val.perLwidth = 0;
									}
									val.isRule = false;
									//sign 未领取 1 ，已领取 2 ，已抢光，3
									if(val.isReceive == "1"){
										//已领取
										val.sign = 2
									}else{
										if(val.couponTotal!=0&&val.couponNum >= val.couponTotal){
											val.sign = 3
										}else{
											val.sign = 1
										}
									}
								});
								console.log(list);
								that.list = list;
							} else {
								that.isnull = true;
							}
						}else{
							that.isnull = true;
						}

						that.$loading.hide();
					} else {
						that.$toast(res.data.msg)
						that.$loading.hide();
						that.isnull = true;
					}
				}).catch((err) => {
					that.$loading.hide();
				})
			},
			getcoupon(couponID, index, giveType) {
				this.$loading.show();
				let param = {
					"userID": this.userinfo.userID,
					"couponID": couponID,
					"issuingWay": giveType
				};
				var that = this;
				//				this.$http.post(this.$baseUrl.baseurl + "KPCX/appCoupon/appReceiveCoupon", param).then((res) => {
				this.$http.post(this.$baseUrl.baseurl + "coupon/app/coupon/appReceiveCoupon", param).then((res) => {
					//					console.log(res);
					if(res.data.Code == 0) {
						that.list[index].sign = 2;
						that.list = that.list;
						that.$loading.hide();
					} else {
						that.$toast(res.data.msg)
						that.$loading.hide();
					}
				}).catch((err) => {
					that.$loading.hide();
				})
			},
			dateuse(str) {
				if(str) {
					var str = str.split('-')[0] + '.' + str.split('-')[1] + '.' + str.split('-')[2];
					return str;
				}
			},
			useCoupon(couponType) {
				if(couponType == 0) {
					//全品
					this.$router.push({
						path: '/index',
					})
				} else if(couponType == 1) {
					//酒店
					this.$router.push({
						path: '/index/hotel',
					})
				}  else if(couponType == 2) {
					//景点
					this.$router.push({
						path: '/index/scenic',
					})
				}  else if(couponType == 3) {
					//火车
					this.$router.push({
						path: '/index/train',
					})
				}  else if(couponType == 4) {
					//汽车
					this.$router.push({
						path: '/index/car/index',
					})
				}  else if(couponType == 5) {
					//飞机
					this.$router.push({
						path: '/index/aircraft',
					})
				}  else if(couponType == 6) {
					//电影
					this.$router.push({
						path: '/index/film',
					})
				}
			}

		},
		components: {
			swiper,
			swiperSlide,

		},
		computed: mapGetters([
			'userinfo',
		]),
	}
</script>

<style scoped>
	.kp-getcoupon {
		background: rgb(255, 71, 1);
		height: 100vh;
	}
	
	.kp-getcoupon.active {
		background: #F4F5F9;
	}
	
	.coupon_flex {
		display: flex
	}
	/*列表  */
	
	.coupon_main {
		padding: 30px 10px;
	}
	
	.coupon_item {
		height: 188px;
		margin-bottom: 10px;
	}
	/*左侧金额  */
	
	.coupon_left {
		padding: 36px 34px 0 28px;
		background-image: url('http://h5.kpchuxing.com/my/img/youhuiquan-@2x.png');
		width: 35%;
		color: #fff;
		text-align: center;
	}
	
	.coupon_left .coupon_top {
		height: 63px;
		line-height: 63px;
	}
	
	.coupon_left .coupon_top .coupon_icon {
		font-size: 46px;
	}
	
	.coupon_left .coupon_top .coupon_mon {
		font-size: 80px;
	}
	
	.coupon_left .coupon_bottom {
		font-size: 30px;
		margin-top: 46px;
	}
	/*右侧  */
	
	.coupon_right {
		width: 70%;
		background: #fff;
		padding: 20px 10px 24px 20px;
		justify-content: space-between;
		position: relative;
	}
	
	.coupon_right .coupon_top {
		font-size: 32px;
		color: #444444;
	}
	
	.coupon_right .coupon_bottom {
		justify-content: space-between;
		font-size: 23px;
		color: #8a8a8a;
	}
	
	.coupon_right .coupon_state {
		width: 84px;
		height: 84px;
		border-radius: 50%;
		line-height: 84px;
		text-align: center;
		display: inline-block;
		margin-right: 20px;
	}
	
	.coupon_state1 {
		border: 5px solid #ffa4b5;
		color: #ef1e45;
		font-size: 24px;
		background: #fdd4e0;
	}
	
	.coupon_state2 {
		border: 5px solid #ffa4b5;
		color: #ef1e45;
		font-size: 24px;
		background: #fdd4e0;
	}
	
	.coupon_state3 {
		border: 5px solid #8a8a8a;
		color: #8a8a8a;
		font-size: 24px;
		background: #eaeaea;
	}
	/*无数据时显示的图片  */
	
	.nulldiv {
		padding-top: 300px;
	}
	
	.resultNull {
		/* padding: 10px 0; */
		font-size: 24px;
		line-height: 70px;
		color: #a7a7a7;
		text-align: center;
		margin: 0 auto;
		width: 352px;
		height: 461px;
	}
	
	.resultNull>img {
		width: 100%;
		height: 100%;
	}
	
	.coupon_cen {
		/*margin: 10px 0;*/
	}
	/*.circle {
		display: inline-block;
		position: relative;
		height: 90px;
		width: 90px;
		border-radius: 50%;
		background: #ef1e45;
	}*/
	
	.pie-right,
	.pie-left {
		position: absolute;
		top: 0;
		left: 0;
		height: 90px;
		width: 90px;
		border-radius: 50%;
	}
	
	.circle_right,
	.circle_left {
		position: absolute;
		top: 0;
		left: 0;
		height: 90px;
		width: 90px;
		border-radius: 50%;
		background: #ffa4b5;
		transition: transform 3s ease-out;
	}
	
	.pie-right,
	.circle_right {
		clip: rect(0, auto, auto, 45px);
	}
	
	.pie-left,
	.circle_left {
		clip: rect(0, 45px, auto, 0);
	}
	
	.mask {
		position: absolute;
		top: 5px;
		left: 5px;
		height: 80px;
		width: 80px;
		line-height: 80px;
		background: #fff;
		border-radius: 50%;
		text-align: center;
	}
	
	.mask_state1 {
		color: #ef1e45;
		font-size: 24px;
		background: #fdd4e0;
	}
	
	.coupon_state2 {
		border: 5px solid #ffa4b5;
		color: #ef1e45;
		font-size: 24px;
		background: #fdd4e0;
	}
	
	.coupon_state3 {
		border: 5px solid #8a8a8a;
		color: #8a8a8a;
		font-size: 24px;
		background: #eaeaea;
	}
	
	.getcoupon_tab {
		background: #F4F5F9;
		padding-top: 100px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
	}
	
	.getcoupon_swip {
		line-height: 71px;
		background: #fff;
		padding: 0 22px 0 24px;
		position: relative;
	}
	
	.getcoupon_every {
		font-size: 32px;
		color: rgb(251, 117, 65);
		padding: 0 5px;
		line-height: 71px;
		text-align: center;
		z-index: 9999;
	}
	
	.getcoupon_every.active {
		color: rgb(255, 74, 4);
		border-bottom: 3px solid rgb(255, 74, 4);
		font-weight: 600;
	}
	
	.tab_img {
		width: 9px;
		height: 70px;
		position: absolute;
		right: 20px;
		top: 0;
	}
	
	.getcouponlist {
		padding-top: 171px;
		background: rgb(255, 71, 1);
		padding-bottom: 30px;
	}
	
	.getcoupon_item {
		width: 682px;
		height: auto;
		margin: 20px 0 0 34px;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.getcoupon_div {
		display: flex;
	}
	
	.couponitem_left {
		width: 510px;
		height: 176px;
		/*border-radius: 10px 0 0 10px;*/
		background: #fff;
		padding: 0 0 0 36px;
		box-sizing: border-box;
		display: flex;
	}
	
	.couponitem_right {
		width: 172px;
		height: 176px;
	}
	
	.couponitem_rc {
		background: url('../../../assets/r_c@2x.png') no-repeat;
		background-size: 172px 176px;
	}
	
	.couponitem_rz {
		background: url('../../../assets/r_z@2x.png') no-repeat;
		background-size: 172px 176px;
	}
	
	.couponitem_rh {
		background: url('../../../assets/h_r@2x.png') no-repeat;
		background-size: 172px 176px;
	}
	
	.couponitem_rhz {
		background: url('../../../assets/h_z@2x.png') no-repeat;
		background-size: 172px 176px;
	}
	
	.couponPrice {
		color: rgb(254, 177, 0);
		text-align: center;
		width: 30%;
		letter-spacing: 0;
	}
	
	.priceMoney {
		margin-top: 40px;
		font-size: 28px;
		font-family: 'MicrosoftYaHei';
		font-weight: 700;
	}
	
	.priceMoney>em {
		font-size: 62px;
		font-family: 'PingFang-SC-Heavy';
	}
	
	.priceMan {
		font-size: 20px;
		margin-top: 14px;
	}
	
	.couponTitle {
		margin-left: 30px;
	}
	
	.coupontext {
		color: rgb(51, 51, 51);
		font-size: 28px;
		margin-top: 20px;
	}
	
	.coupontime {
		color: rgb(153, 153, 153);
		font-size: 20px;
		margin-top: 10px;
	}
	.couponJz{
		font-size: 20px;
		color: rgb(254, 177, 0);
		margin-top: 5px;
	}
	.couponrule {
		color: rgb(153, 153, 153);
		font-size: 20px;
		margin-top: 5px;
	}
	
	.couponrule>img {
		width: 10px;
		height: 6px;
		vertical-align: middle;
		margin-left: 10px;
	}
	
	.assetsimg_ylq {
		margin-left: 37px;
		margin-top: 23px;
		width: 116px;
		height: 87px;
	}
	
	.assets_btn {
		margin-left: 37px;
		font-size: 20px;
		width: 123px;
		/*height: 31px;*/
		line-height: 31px;
		text-align: center;
		border-radius: 15px;
		margin-top: 18px;
	}
	
	.assets_ylq {
		background: #fff;
		color: rgb(226, 122, 1);
	}
	
	.assets_yqg {
		background: rgb(181, 181, 181);
		color: #fff;
	}
	
	.pie_circle {
		width: 106px;
		height: 106px;
		border-radius: 50%;
		background: #ff9d0d;
		position: relative;
		margin-left: 42px;
		margin-top: 12px;
	}
	
	.circle {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 9;
		/*transform: translate(-50%, -50%);*/
		margin-top: -45px;
		margin-left: -45px;
		width: 90px;
		height: 90px;
		background: rgb(255, 189, 58);
		border-radius: 50%;
	}
	
	.circleText {
		font-size: 22px;
		color: #fff;
		text-align: center;
		margin-top: 22px;
		letter-spacing: 0;
	}
	
	.circlePer {
		font-size: 26px;
		color: #fff;
		text-align: center;
		margin-top: 6px;
		letter-spacing: 0;
	}
	
	.circlePer>em {
		font-size: 28px;
	}
	
	.left_circle,
	.right_circle {
		width: 50%;
		height: 100%;
		float: left;
		overflow: hidden;
		position: relative;
	}
	
	.left_circle,
	.left-deg {
		border-radius: 106px 0 0 106px;
	}
	
	.right_circle,
	.right-deg {
		border-radius: 0 106px 106px 0;
	}
	
	.left-deg,
	.right-deg {
		width: 100%;
		height: 100%;
		background: #fff;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.left-deg {
		transform-origin: right center;
		transform: rotate(-180deg);
	}
	
	.right-deg {
		transform-origin: left center;
		transform: rotate(-180deg);
	}
	
	.assets_ylq_liji {
		margin-top: 10px;
	}
	
	.getcoupon_con {
		padding: 16px 44px 25px 20px;
		background: #fff;
		width: 100%;
		box-sizing: border-box;
	}
	
	.getcoupon_text {}
	
	.getcouponText {
		line-height: 1.5;
		color: rgb(153, 153, 153);
		font-size: 22px;
	}
	
	.getcoupon_text>ol {
		padding-left: 30px;
	}
	
	.getcoupon_text>ol>li {
		list-style: decimal;
		line-height: 1.5;
		color: rgb(153, 153, 153);
		font-size: 22px;
		font-style: 'PingFang-SC-Medium';
	}
	
	.coupon_daima {
		margin-top: 20px;
		font-size: 22px;
		color: rgb(153, 153, 153);
		line-height: 1.3;
	}
	.circleTextN{
		color: #fff;
		font-size: 32px;
		line-height: 90px;
		text-align: center;
	}
	.couponDtile{
		display: flex;
	  	align-items: center;
	  	justify-content: space-between;
	}
	.mp15{
		margin-top: 15px;
	}
</style>